<template>
  <div class="main-layout">
    <!-- 左侧固定导航栏 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <div class="logo-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="11" width="18" height="10" rx="2" />
            <circle cx="12" cy="5" r="2" />
            <path d="M12 7v4" />
            <line x1="8" y1="16" x2="8" y2="16" />
            <line x1="16" y1="16" x2="16" y2="16" />
            <path d="M9 20v1" />
            <path d="M15 20v1" />
          </svg>
        </div>
        <h1 class="logo-title">AI测试工具平台</h1>
      </div>
      
      <nav class="main-navigation">
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'dashboard' }"
          @click="switchTab('dashboard')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              <polyline points="9 22 9 12 15 12 15 22" />
            </svg>
          </span>
          <span>首页</span>
        </div>
        
        <div 
          class="nav-item" 
          :class="{ active: currentTab === 'api' }"
          @click="switchTab('api')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M6 3v12" />
              <circle cx="18" cy="6" r="3" />
              <circle cx="6" cy="18" r="3" />
              <path d="M18 9a9 9 0 0 1-9 9" />
            </svg>
          </span>
          <span>接口管理</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'automation' }"
          @click="switchTab('automation')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 11h4" />
              <path d="M14 15h4" />
              <path d="M14 7h4" />
              <path d="M3 15h7v4H3z" />
              <path d="M3 11h7v-4H3z" />
            </svg>
          </span>
          <span>自动化测试</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'cases' }"
          @click="switchTab('cases')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="7" height="7" />
              <rect x="14" y="3" width="7" height="7" />
              <rect x="14" y="14" width="7" height="7" />
              <rect x="3" y="14" width="7" height="7" />
            </svg>
          </span>
          <span>功能案例</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'performance' }"
          @click="switchTab('performance')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
            </svg>
          </span>
          <span>性能测试</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'report' }"
          @click="switchTab('report')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="20" x2="18" y2="10" />
              <line x1="12" y1="20" x2="12" y2="4" />
              <line x1="6" y1="20" x2="6" y2="14" />
              <line x1="2" y1="20" x2="22" y2="20" />
            </svg>
          </span>
          <span>测试报告</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: currentTab === 'settings' }"
          @click="switchTab('settings')"
        >
          <span class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="3" />
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
            </svg>
          </span>
          <span>系统设置</span>
        </div>
      </nav>
    </aside>

    <!-- 右侧主内容区域 -->
    <div class="main-container">
      <!-- 顶部导航栏 - 使用独立组件 -->
      <TopNavbar @logout="handleLogout" />

      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 标签页容器 -->
        <div class="tabs-container">
          <div class="tabs-header">
            <div 
              v-for="tab in openTabs" 
              :key="tab.id"
              class="tab-item"
              :class="{ active: currentTab === tab.id }"
              @click="switchToTab(tab.id)"
            >
              <span>{{ tab.label }}</span>
              <span 
                v-if="tab.closable" 
                class="close-icon"
                @click.stop="closeTab(tab.id)"
              >
                ×
              </span>
            </div>
          </div>
        </div>

        <!-- 动态内容区域 -->
        <div class="content-wrapper">
          <!-- 首页仪表盘 -->
          <DashboardMain v-if="currentTab === 'dashboard'" />
          
          <!-- 接口管理 -->
          <ApiManagement v-else-if="currentTab === 'api'" />
          
          <!-- 其他模块占位 -->
          <div v-else class="placeholder-content">
            <div class="placeholder-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
              </svg>
            </div>
            <h3>{{ getCurrentTabName() }}模块</h3>
            <p>此模块正在开发中，敬请期待...</p>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ROUTES_CONFIG } from '../config'
import DashboardMain from './DashboardMain.vue'
import ApiManagement from './ApiManagement.vue'
import TopNavbar from '../components/TopNavbar.vue'

export default {
  name: 'MainLayout',
  components: {
    DashboardMain,
    ApiManagement,
    TopNavbar
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const currentTab = ref('dashboard')
    
    // 动态Tab管理
    const openTabs = ref([
      {
        id: 'dashboard',
        label: '数据看板',
        closable: false // 数据看板不可关闭
      }
    ])
    
    // Tab配置
    const tabConfigs = {
      'dashboard': { label: '数据看板', closable: false },
      'api': { label: '接口管理', closable: true },
      'automation': { label: '自动化测试', closable: true },
      'cases': { label: '功能案例', closable: true },
      'performance': { label: '性能测试', closable: true },
      'report': { label: '测试报告', closable: true },
      'settings': { label: '系统设置', closable: true }
    }

    const switchTab = (tabName) => {
      // 检查Tab是否已经打开
      const existingTab = openTabs.value.find(tab => tab.id === tabName)
      
      if (!existingTab) {
        // 如果未打开，则添加新Tab
        const config = tabConfigs[tabName]
        if (config) {
          openTabs.value.push({
            id: tabName,
            label: config.label,
            closable: config.closable
          })
        }
      }
      
      // 切换到目标Tab
      currentTab.value = tabName
      console.log('切换到标签页:', tabName)
    }
    
    const switchToTab = (tabId) => {
      currentTab.value = tabId
    }
    
    const closeTab = (tabId) => {
      // 找到要关闭的Tab的索引
      const tabIndex = openTabs.value.findIndex(tab => tab.id === tabId)
      
      if (tabIndex > -1) {
        // 删除Tab
        openTabs.value.splice(tabIndex, 1)
        
        // 如果关闭的是当前Tab，则切换到其他Tab
        if (currentTab.value === tabId) {
          if (openTabs.value.length > 0) {
            // 切换到最后一个Tab，或者当前位置的上一个Tab
            const newIndex = Math.min(tabIndex, openTabs.value.length - 1)
            currentTab.value = openTabs.value[newIndex].id
          } else {
            // 如果没有Tab了，默认回到数据看板
            currentTab.value = 'dashboard'
          }
        }
      }
    }

    const getCurrentTabName = () => {
      const tabNames = {
        'dashboard': '数据看板',
        'api': '接口管理',
        'automation': '自动化测试',
        'cases': '功能案例',
        'performance': '性能测试',
        'report': '测试报告',
        'settings': '系统设置'
      }
      return tabNames[currentTab.value] || '数据看板'
    }

    const logout = () => {
      router.push('/login')
    }

    // 跳转到登录页面
    const goToLogin = () => {
      router.push(ROUTES_CONFIG.login)
    }

    // 处理登出
    const handleLogout = () => {
      if (confirm('确定要退出登录吗？')) {
        userStore.logout()
      }
    }

    return {
      userStore,
      currentTab,
      openTabs,
      switchTab,
      switchToTab,
      closeTab,
      getCurrentTabName,
      logout,
      goToLogin,
      handleLogout
    }
  }
}
</script>

<style scoped>
/* 继承原Home.vue的样式，保持UI不变 */
@import '../styles/LayoutStyles.css';
</style>